
<template>

      <div>

        <div class="head">
          <div class="image">

          </div>

          <div class="nav">
            <div class="nav-items" :class="routeActive=='/discover'?'active':'' "  @click="changPage('/discover')">发现音乐</div>
            <div class="nav-items " :class="routeActive=='/my'?'active':'' "  @click="changPage('/my')">我的音乐</div>
            <div class="nav-items " :class="routeActive=='/friend'?'active':'' " @click="changPage('/friend')">关注</div>
            <div class="nav-items">商城</div>
            <div class="nav-items">音乐人</div>
            <div class="nav-items">云推歌</div>
            <div class="nav-items" :class="routeActive=='/download'?'active':'' " @click="changPage('/download')">下载音乐端</div>

            <div class="search">
              <img src="@/assets/img/search.png">
              <input type="search" placeholder="音乐/视频/电台/用户"/>

            </div>
            <div class="create">
              创作者中心
            </div>
            <div class="nav-items">登录</div>

          </div>


        </div>
      </div>

</template>

<script>
export default {
  // data(){
  //   return{
  //     routeActive:''
  //   }
  // },
  methods: {
    changPage(path) {
      this.$router.push(path)

    }
  },

  computed:{
    routeActive(){
      return this.$route.matched[0].path;
    }
  }

}
</script>

<style scoped>
html,body{
  padding: 0;
  margin: 0;
  width: 100%;

}
.head {
  width: 100%;
  height: 70px;
  background-color:#242424;



}
.image{
background: url("@/assets/img/topbar.png");
width: 177px;
height: 79px;
}
.nav{
  display: flex;
  margin: 0 18px;
  position: relative;
  left: 200px;
  bottom:58px;
  color: #cccccc;
}
.nav-items{
  margin-left: 20px;
  cursor: pointer;
  height: 70px;
  line-height: 35px;

}
.search{
  background: #fff;
  border-radius: 25px;
  position: relative;
  margin: 0 20px;
  width: 158px;
  height: 32px;

}

.search img{
  width: 20px;
  height: 20px;
  margin-top: 2px;

}
input{
  //margin-left: 40px;
  width: 115px;
  height: 16px;
  align-items: center;
  //display: none;
  margin: 0 8px;
  outline: none;
  border: none;
}
.create{
  color: #cccccc;
  background: #242424;
  border-radius: 20px;
  position: relative;
  margin: 0 20px;
  width: 90px;
  height: 32px;
  border: 1px solid grey;
  text-align: center;
  align-items: center;
  line-height: 30px;

}
.active{
line-height: 70px;
  margin-top: -20px;
  background: rgba(0,0,0,.5);

}

</style>